#backpack_page{
  display: grid;
  grid-template-rows: auto 1fr;

  .top_bar{
    .wrapper{
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      .left{
        display: flex;
      }
  
      .right{
        @include S(margin-right, 10px);
        @include PlainText;
      }
  
      .show_num_box{
        background: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        @include S(margin, 0, 5px);
        @include S(margin-top, 8px);
        @include S(padding, 2px, 6px);
        @include S(width, 100px);
        @include DropShadow;
  
        img{
          width: 20px;
        }
        span{
          display: inline-block;
          @include BreakText;
        }
      }
    }
  }

  .select-btns{
    @include S(margin-top, 10px);
    @include S(margin-bottom, 10px);
    overflow-x: auto;
    pointer-events: all;

    .btns{
      // width: fit-content;
      // display: flex;
    }

    .btn{
      display: inline-block;
      padding: 5px;
      background: #f1f1f7;
      @include S(width, 50px);
      text-align: center;
      @include PlainText;
      // border-radius: 20px;
      // @include DropShadow;
      color: #777;
      pointer-events: all;
      box-shadow: 0 3px 8px 0 rgba(0 , 22, 44, .1);

      &.active{
        background: #ffffff;
      }
    }

    // @media (min-width: 1000px) {
    //   overflow-x: hidden;

    //   .btns{
    //     display: block;
    //   }
    // }
  }

  .content{
    overflow-y: scroll;
    pointer-events: all;

    .items{
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 10px;
      grid-gap: 10px;
      overflow-y: auto;
      pointer-events: all;

      @include onPc {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      }

      .item{
        border-radius: 5px;
        pointer-events: all;
        border: unset;
        // box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2);
        background: white;
        color: #666;
        position: relative;
        @include Text;
        @include BreakText;
        @include S(padding, 10px, 20px);
        border-left: 6px solid rgba(187, 187, 187, 0.8);

        .num, .level{
          position: absolute;
          right: 5px;
          top: 1px;
          color: #999;
          @include PlainText;
        }
        .level{
          top: unset;
          bottom: 1px;
        }
      }
//#636c89
      p{
        @include PlainText;
      }
    }
  }
}